<template>
  <el-container>

    <el-header>
      <el-input v-model="queryInfo.classId" @blur="getClassInfo" @keyup.enter.native="$event.target.blur" placeholder="搜索班课号"
                prefix-icon="el-icon-search"></el-input>
      <el-input v-model="queryInfo.className" @blur="getClassInfo" @keyup.enter.native="$event.target.blur" placeholder="搜索班级名称" prefix-icon="el-icon-search"
                style="margin-left: 5px"></el-input>
      <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="getClassInfo">查询</el-button>
      <el-button type="primary" style="margin-left: 5px" icon="el-icon-plus" @click="showAddDialog"
                 v-show="roleId === '2'||roleId === '3'">创建班级</el-button>
      <el-button type="primary" style="margin-left: 5px" icon="el-icon-plus" @click="showJoinDialog"
                 v-show="roleId === '1'||roleId === '3'">加入班级</el-button>
    </el-header>

    <el-main>

      <el-table
        ref="multipleTable"
        @row-click="ClassTableClicked"
        highlight-current-row
        v-loading="loading"
        :border="true"
        :data="classInfo"
        tooltip-effect="dark"
        style="width: 100%; cursor: pointer">
        <el-table-column align="center"
                         prop="classId"
                         label="班课号">
        </el-table-column>
        <el-table-column align="center"
                         prop="className"
                         label="班级名称">
        </el-table-column>

        <el-table-column align="center"
                         prop="creator"
                         label="创建人">
        </el-table-column>

        <el-table-column align="center"
                         label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createDate }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click.stop="showDeleteClassDialog(scope.row)" v-show="roleId === '2'||roleId === '3'">删除</el-button>
            <el-button type="warning" @click.stop="showExitClassDialog(scope.row)" v-show="roleId === '1'||roleId === '3'">退出</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination style="margin-top: 25px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

    </el-main>

    <el-dialog title="添加班级" :visible.sync="addTableVisible" width="30%" @close="resetAddForm"
               center>

      <el-form :model="addForm" :rules="addFormRules" ref="addForm">

        <el-form-item label="班级名称" label-width="120px" prop="className">
          <el-input v-model="addForm.className"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClass">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="加入班级" :visible.sync="joinTableVisible" width="30%" @close="resetjoinForm"
               center>

      <el-form :model="joinForm" :rules="joinFormRules" ref="joinForm">

        <el-form-item label="班课号" label-width="120px" prop="classId">
          <el-input v-model="joinForm.classId"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="joinTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="joinClass">确 定</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script>
export default {
  name: "ClassManage",

  data () {
    return{
      roleId:'',
      //查询班级的参数
      queryInfo: {
        'classId': '',
        'className': '',
        'pageNo': 1,
        'pageSize': 10
      },
      //班级信息
      classInfo: [],
      //所有班级的条数
      total: 0,
      //添加班级的对话框是否显示
      addTableVisible: false,
      //加入班级的对话框是否显示
      joinTableVisible: false,
      //添加班级的表单信息
      addForm: {
        'className': ''
      },
      //加入班级的表单信息
      joinForm: {
        'classId': ''
      },
      //添加班级表单的验证规则
      addFormRules: {
        className: [
          {
            required: true,
            message: '请输入班级名称',
            trigger: 'blur'
          },
        ]
      },
      //加入班级表单的验证规则
      joinFormRules: {
        classId: [
          {
            required: true,
            message: '请输入班课号',
            trigger: 'blur'
          },
        ]
      },
      //表格信息加载
      loading: true
    }
  },
  created () {
    this.getUserRole()
    this.getClassInfo()
  },
  methods :{
    //角色判别
    getUserRole (){
      this.$http.get(this.API.checkToken).then((resp) => {
        if (resp.data.code === 200){
          this.roleId = resp.data.data.roleId;
        }else{
          this.$router.push('/')
        }
      })
    },
    //获取班级信息
    getClassInfo () {
      this.$http.get(this.API.getClassInfo, { params: this.queryInfo }).then((resp) => {
        if (resp.data.code === 200) {
          this.classInfo = resp.data.data.classes;
          this.total = resp.data.data.total;
          this.loading = false;
        } else {
          this.$notify({
            title: 'Tips',
            message: '获取信息失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    //分页插件的大小改变
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getClassInfo()
    },
    //分页插件的页数
    handleCurrentChange (val) {
      this.queryInfo.pageNo = val
      this.getClassInfo()
    },
    //点击创建班级按钮
    showAddDialog () {
      this.addTableVisible = true
    },
    //点击加入班级按钮
    showJoinDialog () {
      this.joinTableVisible = true
    },
    //添加班级
    addClass () {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.$http.post(this.API.addClass, this.addForm).then((resp) => {
            if (resp.data.code === 200) {
              this.getClassInfo()
              this.$notify({
                title: 'Tips',
                message: resp.data.message,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: 'Tips',
                message: resp.data.message,
                type: 'error',
                duration: 2000
              })
            }
            this.addTableVisible = false
          })
        } else {
          this.$message.error('请检查您所填写的信息是否有误')
          return false
        }
      })
    },
    //加入班级
    joinClass () {
      this.$refs['joinForm'].validate((valid) => {
        if (valid) {
          this.$http.post(this.API.joinClass, this.joinForm).then((resp) => {
            if (resp.data.code === 200) {
              this.getClassInfo()
              this.$notify({
                title: 'Tips',
                message: resp.data.message,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: 'Tips',
                message: resp.data.message,
                type: 'error',
                duration: 2000
              })
            }
            this.joinTableVisible = false
          })
        } else {
          this.$message.error('请检查您所填写的信息是否有误')
          return false
        }
      })
    },
    //显示删除班级确认框
    showDeleteClassDialog(row){
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '是否确认删除班级： '),
          h('i', { style: 'color: teal' }, row.className)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          instance.confirmButtonLoading = false
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            this.$http.get(this.API.deleteClass, {params: { 'classId': row.classId }}).then((resp) => {
              if (resp.data.code === 200) {
                //删除成功后,回调更新数据
                this.getClassInfo()
                instance.confirmButtonLoading = false
                done()
                this.$notify({
                  title: 'Tips',
                  message: resp.data.message,
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$notify({
                  title: 'Tips',
                  message: '操作失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            done();
          }
        }
      }).catch(() => {})
    },
    //显示退出班级的确认框
    showExitClassDialog(row){
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '是否确认退出班级： '),
          h('i', { style: 'color: teal' }, row.className)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          instance.confirmButtonLoading = false
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            this.$http.get(this.API.exitClass, {params: { 'classId': row.classId }}).then((resp) => {
              if (resp.data.code === 200) {
                //删除成功后,回调更新数据
                this.getClassInfo()
                instance.confirmButtonLoading = false
                done()
                this.$notify({
                  title: 'Tips',
                  message: resp.data.message,
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$notify({
                  title: 'Tips',
                  message: '操作失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            done();
          }
        }
      }).catch(() => {})
    },
    //班级表单击事件
    ClassTableClicked(val){
      this.$router.push('/classMate/'+ val.classId)
    },
    //表单信息重置
    resetAddForm () {
      //清空表格数据
      this.$refs['addForm'].resetFields()
    },
    resetjoinForm () {
      //清空表格数据
      this.$refs['joinForm'].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}

.el-input {
  width: 200px;
}

.el-container {
  animation: leftMoveIn .7s ease-in;
}

@keyframes leftMoveIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

/deep/ .el-table thead {
  color: rgb(85, 85, 85) !important;
}

/*表格的头部样式*/
/deep/ .has-gutter tr th {
  background: rgb(242, 243, 244);
  color: rgb(85, 85, 85);
  font-weight: bold;
  line-height: 32px;
}

.el-table {
  box-shadow: 0 0 1px 1px gainsboro;
}
</style>
